<template>
  <div class="layout" id="layout-body">
    <div class="left">
      <h3>Welcome !</h3>

      <div class="group-2">
        <p>Sign in to</p>
        <p>Lorem Ipsum is simply</p>
      </div>

      <div class="group-3">
        <div class="input-group">
          <el-form
            class="demo-ruleForm"
            ref="iptRef"
            :model="user"
            :rules="rules"
            status-icon
            hide-required-asterisk
            @keyup.enter="handleLogin(iptRef)"
          >
            <el-form-item label="Email" prop="emial" label-position="top">
              <input v-model="user.emial" type="text" placeholder="Enter your email" />
            </el-form-item>
            <el-form-item label="User name" prop="username" label-position="top">
              <input v-model="user.username" type="text" placeholder="Enter your user name" />
            </el-form-item>
            <el-form-item label="Password" prop="password" label-position="top">
              <input
                v-model="user.password"
                type="password"
                placeholder="Enter your Password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="Confrim Password" prop="confirmPW" label-position="top">
              <input
                v-model="user.confirmPW"
                type="password"
                placeholder="Confrim your Password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="Verification Code" prop="code" label-position="top">
              <template style="display: flex; width: 100%">
                <input
                  v-model="user.code"
                  type="text"
                  placeholder="Enter Verification Code"
                  autocomplete="off"
                />
                <el-button @click="getCode">{{
                  totalSeconds === seconds ? '获取验证码' : `${seconds}秒后重试`
                }}</el-button>
              </template>
            </el-form-item>
          </el-form>
        </div>

        <button class="btn-group" @click="handleLogin(iptRef)">Register</button>
      </div>

      <div class="group-4">
        Already have an Account ？
        <!-- <p >Register</p> -->
        <router-link to="/login">Register</router-link>
      </div>
    </div>
    <div class="right">
      <img src="../../assets/images/login/login-right.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { postUserRegisterApi } from '@/apis'
import { useRouter } from 'vue-router'

const router = useRouter()
// const userStore = useUserStore()
const iptRef = ref()
const totalSeconds = ref(60) // 总计时器
const seconds = ref(totalSeconds.value) // 倒计时
const timerId = ref(null) // 定时器id
const result = ref('') // 验证码

const user = reactive({
  emial: '',
  username: '',
  password: '',
  confirmPW: '',
  code: ''
})

// 判断两次密码是否一致
const checkPW = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== user.password) {
    user.confirmPW = ''
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const rules = ref({
  emial: [
    {
      required: true,
      message: 'Please input email address',
      trigger: 'blur'
    },
    {
      type: 'email',
      message: 'Please input correct email address',
      trigger: ['blur', 'change']
    }
  ],
  username: [
    { min: 3, message: 'Min Length should be 3', trigger: 'blur' },
    { required: true, message: 'Please input your username', trigger: 'change' }
  ],
  password: [
    { required: true, message: 'Please input your password', trigger: 'change' },
    { min: 6, message: 'Min Length should be 6 ', trigger: 'blur' }
  ],
  confirmPW: [
    { validator: checkPW, trigger: 'blur' },
    { required: true, message: 'Confrim your Password', trigger: 'change' },
    { min: 6, message: 'Min Length should be 6 ', trigger: 'blur' }
  ],
  code: [{ required: true, message: 'Please input your code', trigger: 'change' }]
})

// 获取验证码
const getCode = () => {
  if (!timerId.value && seconds.value === totalSeconds.value) {
    timerId.value = setInterval(() => {
      seconds.value--
      if (seconds.value === 0) {
        clearInterval(timerId.value)
        timerId.value = null
        seconds.value = totalSeconds.value
      }
    }, 1000)
  }

  // 发送网络请求

  result.value = '1234'
}

// 提交表单
const handleLogin = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid && user.code === result.value) {
      // 两次密码输入相同
      // userStore.setUser(user.username, user.password)
      const { message } = await postUserRegisterApi({
        username: user.username,
        password: user.password,
        email: user.emial
      })
      // console.log('注册用户: ', res)

      ElNotification({
        title: 'Info',
        message: message,
        type: 'info'
      })

      router.push('/login')
    }
    if (user.code !== result.value) {
      ElMessage.error('验证码错误')
    }
  })
}

// // 重置表单
// const resetForm = () => {
//   loginFormRef.value.resetFields()
// }

onMounted(() => {
  const DEFAULT_SCREEN = {
    width: 1920,
    height: 1580
  }
  // 只考虑长>宽的情形
  const setDOMStyle = () => {
    const dom = document.getElementById('layout-body')

    const height = (DEFAULT_SCREEN.height * window.innerHeight) / DEFAULT_SCREEN.width

    // const width = (DEFAULT_SCREEN.width * window.innerWidth) / DEFAULT_SCREEN.height
    dom.style.height = height + 'px'
    // dom.style.width = width + 'px'
  }
  window.onresize = setDOMStyle
  setDOMStyle()
})
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dedede;

  .left {
    padding: 36px 35px;
    margin-left: 111px;
    width: 505px;
    min-height: 757px;
    border: 0.5px solid #878787;
    box-shadow: 0px 4px 64px 0px rgba(0, 0, 0, 0.05);

    h3 {
      font-size: 25px;
      font-weight: 300;
      line-height: 35px;
      color: #000000;
    }

    .group-2 {
      font-size: 31px;
      font-weight: 500;
      line-height: 43px;
      color: #000000;
    }

    .group-3 {
      margin-top: 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 423px;
      height: 598px;

      .input-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;

        .el-form {
          width: 100%;
          height: 100%;

          .el-form-item {
            input {
              padding-left: 17px;
              width: 100%;
              height: 59px;
            }
            input::-webkit-input-placeholder {
              font-size: 18px;
              font-weight: 300;
              line-height: 20px;
              color: #ababab;
            }
            input:focus {
              outline: none;
            }
          }
        }
      }

      .check-group {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        p {
          font-size: 14px;
          font-weight: 300;
          line-height: 17px;
          color: #000000;
        }
      }

      .btn-group {
        width: 100%;
        height: 57px;
        color: #fff;
        background-color: #000000;
      }
    }

    .group-4 {
      margin-top: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      font-weight: 300;
      font-size: 16px;
      color: #7d7d7d;
      a {
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        text-decoration: none;
      }
    }
  }

  .right {
    width: 827px;
    height: 650px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.el-button {
  margin-left: 15px;
  width: 100px;
  height: 59px;
  border: 1.2px solid;
  border-radius: 8px;
}

:deep(.el-checkbox__input .is-checked .is-focus) {
  color: #ababab;
}
</style>
